<template>
  <div class="container">
    <div class="title">
      <ul>
        <router-link to="/dataview/detailedData/datasj" tag="li">数据</router-link>
        <router-link to="/dataview/detailedData/chart" tag="li">图表</router-link>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.container {
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
    }
  }
  .title {
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
      width: 80%;
      margin: 0 auto;
      li {
        flex: 1;
        list-style: none;
        color: #000;
        padding: 0.05rem 0;
        margin: 0 0.3rem;
        font-size: 0.14rem;
        padding-bottom: 0.06rem;
        border-bottom: 3px solid transparent;
      }
      .router-link-active {
        border-bottom: 3px solid #7f8fc3;
      }
    }
  }
  .content {
    padding-top: 0.2rem;
  }
}
</style>